<!--
 * @LastEditTime : 2022-11-03 16:19:38
 * @FilePath     : /pyy/src/views/chemistry/detail/index.vue
 * @Description  : 化学分析 > 化学分析详情
-->
<template>
  <div id="chemistry-detail">
    <van-nav-bar title="化学分析检测" left-arrow @click-left="goBack" style="zIndex:99"/>

    <div id="preview" v-show="isShow">
      <div v-html="htmlText"></div>
    </div>
    
    <div class="contaniner">
      <van-form
        label-width="180px"
        input-align="right"
        error-message-align="right"
      >
        <div class="form-group">
          <van-field
            readonly
            name="consignorW"
            label="委托人"
            v-model="detailInfo.consignorW"
          />
          <van-field
            readonly
            name="clientName"
            label="委托方客户名称"
            v-model="detailInfo.clientName"
          />
          <van-field
            readonly
            name="principalPhone"
            label="委托人电话"
            v-model="detailInfo.principalPhone"
          />
          <van-field
            readonly
            name="principalAdd"
            label="委托人地址"
            v-model="detailInfo.principalAdd"
          />
          <van-field
            readonly
            name="principalAdd"
            label="简化合同评审"
            v-model="detailInfo.contractReview"
          />
          <!-- <van-field
            readonly
            name="contractCode"
            label="合同编码"
            v-model="detailInfo.contractCode"
          /> -->
          <van-field
            readonly
            name="organization"
            label="检验机构"
            v-model="detailInfo.organization"
          />
          <van-field
            readonly
            name="toWay"
            label="样品送样方式"
            v-model="detailInfo.toWay"
          />
          <van-field
            readonly
            name="analysisSum"
            label="分析检测金额"
            v-model="detailInfo.analysisSum"
          />
          <van-field
            readonly
            name="require"
            label="是否同意检验要求"
            v-model="detailInfo.require"
          />
          <van-field
            readonly
            name="means"
            label="手动输入方法"
            v-model="detailInfo.means"
          />
          <van-field
            readonly
            name="dispose"
            label="样品是否按实验室规定处理"
            v-model="detailInfo.dispose"
          />
          <van-field
            readonly
            name="urgent"
            label="是否加急"
            v-model="detailInfo.urgent"
          />
          <van-field
            readonly
            name="takeDate"
            label="计划客户取报告日期"
            v-model="detailInfo.takeDate"
          />
          <van-field
            readonly
            name="typeOfContract"
            label="合同类型"
            v-model="detailInfo.typeOfContract"
          /> <van-field
            readonly
            name="paymentOk"
            label="是否付款"
            v-model="detailInfo.paymentOk"
          /> <van-field
            readonly
            name="paymentMethod"
            label="付款方式"
            v-model="detailInfo.paymentMethod"
          />
          <van-field
            class="theTestReport"
            readonly
            name="generateAReport"
            label="生成报告"
          >
            <template #input>
              <span
                style="display: block"
                v-for="item in detailInfo.ccbg"
                :key="item.file_url"
                @click="preview(item.file_url)"
              >
                <!-- href="item.url" -->
                {{ item.filename }}
              </span>
            </template>
          </van-field>
        </div>

        <detailed
          v-for="(item, index) in detailInfo.child"
          :key="'detailed_' + index"
          :index="index"
          :form="item"
        />
      </van-form>
    </div>
  </div>
</template>

<script>
import Detailed from "./components/detailed.vue";
import { Toast } from "vant";
import api from "@/http/api";

export default {
  name: "ChemistryDetail",
  components: {
    Detailed,
  },
  data() {
    return {
      detailInfo: {},
      htmlText: null,
      isShow: false,
    };
  },
  created() {
    const id = this.$route.query.id;
    if ([null, undefined, ""].includes(id)) {
      Toast.fail("参数异常");
      this.goBack();
      return;
    }
    this.getDetail(id);
  },
  mounted() {
    document.getElementById('preview').style.width = window.screen.width +'px'
  },
  methods: {
    // 附件
    preview(fileUrl) {
      const toast = Toast.loading({
        duration: 0,
        forbidClick: true,
      });
      api.equipment
        .checkTheCertificateDetails(fileUrl)
        .then((res) => {
          const { code, data, msg } = res.data || {};
          if (code !== 200) return Toast.fail(msg);
          this.htmlText = data;
          this.isShow = true;
        })
        .finally(() => {
          setTimeout(toast.clear, 500);
        });
    },
    // 附件预览
    previewTheAttachment(id) {
      this.htmlText = id;
      this.isShow = true;
    },
    /**
     * 返回
     */
    goBack() {
      this.$router.replace({
        name: "Chemistry",
      });
    },

    /**
     * 获取 化学分析详情
     * @param {string} id: 化学分析数据列表项id
     */
    getDetail(id) {
      const toast = Toast.loading({
        duration: 0,
        forbidClick: true,
      });

      api.chemistry
        .getDetail(id)
        .then((res) => {
          const { code, data, msg } = res.data || {};
          if (code !== 200) {
            Toast.fail(msg || "加载失败");
            return;
          }
          this.detailInfo = data;
        })
        .finally(() => {
          setTimeout(toast.clear, 500);
        });
    },
  },
};
</script>

<style lang="less" scoped>
#preview {
  position: absolute;
  height: 100%;
  background-color: #fff;
  z-index: 9;
  img {
    width: 100%;
  }
}
#chemistry-detail {
  width: 100vw;
  height: 100vh;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  position: relative;
  /deep/ .van-nav-bar {
    .van-nav-bar__title {
      font-family: "Inter";
      font-style: normal;
      font-weight: 600;
      font-size: 18px;
      line-height: 20px;
      text-align: center;
      letter-spacing: -0.24px;
      color: #333333;
    }

    .van-nav-bar__content {
      .van-nav-bar__left {
        i {
          font-size: 20px;
          color: #999999;
        }
      }
    }
  }

  .contaniner {
    width: 100%;
    height: 0;
    flex: 1;
    overflow-y: auto;

    /deep/ .van-form {
      .form-group {
        box-sizing: border-box;
        padding: 0 12px;
        background: #ffffff;
      }

      .van-field {
        font-family: "Inter";
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #666666;
        padding: 12px 4px;
        border-bottom: 1px solid #e8e8e8;

        .van-field__label {
          span {
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style>
